<template>
    <div class="card">
        <!-- {{this.cardData}} -->
        <div class="block">
            <div v-if="this.cardData == ''" class="noEquipment"> 
                该项绑定设备未开启
            </div>
            <el-carousel trigger="click" class="card_hight" :autoplay="false" :initial-index="cardData.index">
            <el-carousel-item v-for="item in cardData.unit" :key="item.index">
                <!-- 设备标题 -->
                 <router-link to="/overview">
                    <h4 class="normal" @click="router('humi',item)" :title="item.name">
                        <!-- <svg class="icon card_icon" aria-hidden="true">
                            <use xlink:href="#icon-icon_airconditioning-copy"></use>
                        </svg> -->
                        <img class="title_icon" src="../../assets/title.png" alt />
                        {{item.typename}}:&nbsp;{{item.name}}
                    </h4>
                 </router-link>
                <!-- 卡片内容 -->
                <div class="card_padding">
                    <div class="left">
                        <div class="humi_water">
                            <div class="humi_w_div humi_w_div_flex">
                                <!-- <div class="humi_w_icon">
                                    <svg class="icon shuiwei" aria-hidden="true">
                                        <use xlink:href="#icon-shuiwei"></use>
                                    </svg>                                
                                    <p>{{item.unit[3].value.toFixed(0)}}{{item.unit[3].flag}}</p>
                                </div>
                                <p class="humi_w_name">{{item.unit[3].name}}</p> -->
                                
                                <div class="shuiqiu">
                                    <div class="shuiqiucontent">
                                        <div class="shui shui1" v-if="item.unit[2].value <= 10"></div>
                                        <div class="shui shui2" v-if="item.unit[2].value <= 30 && item.unit[2].value > 10"></div>
                                        <div class="shui shui3" v-if="item.unit[2].value <= 40 && item.unit[2].value > 30"></div>
                                        <div class="shui shui4" v-if="item.unit[2].value <= 60 && item.unit[2].value > 40"></div>
                                        <div class="shui shui5" v-if="item.unit[2].value <= 70 && item.unit[2].value > 60"></div>
                                        <div class="shui shui6" v-if="item.unit[2].value < 90 && item.unit[2].value > 70"></div>
                                        <div class="shui shui7" v-if="item.unit[2].value >= 90"></div>
                                        <!-- <div class="shui shui2"></div>
                                        <div class="shui shui3"></div>
                                        <div class="shui shui4"></div>
                                        <div class="shui shui5"></div>
                                        <div class="shui shui6"></div> -->
                                    </div>
                                    <p class="humiCard_shuiwei">{{item.unit[2].value.toFixed(0)}}%</p>
                                </div>
                                <p class="humi_w_div_title">水位</p>
                            </div>
                            <div class="humi_w_div">                          
                                <p class="humi_p1">
                                    <span v-if="item.unit[3].value == 0">关机</span>
                                    <span v-if="item.unit[3].value == 16">开机</span>
                                    <span v-if="item.unit[3].value == 24">灭菌</span>
                                    <span v-if="item.unit[3].value == 20">除湿</span>
                                    <span v-if="item.unit[3].value == 18">加湿</span>
                                    <span v-if="item.unit[3].value == 17">恒湿</span>
                                    <span v-if="item.unit[3].value == 272 || item.unit[3].value == 528">定时运行</span>
                                </p>
                                <p>当前状态</p>  
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <ul>
                            <li class="humi_li">
                                <p class="humi_p2">环境温度:</p>
                                <p class="humi_p3">{{item.unit[0].value.toFixed(1)}}<span>℃</span></p>
                            </li>
                            <li class="humi_li">
                                <p class="humi_p2">相对湿度:</p>
                                <p class="humi_p3" style="color:#ee6842">{{item.unit[1].value.toFixed(1)}}<span>%RH</span></p>
                            </li>
                            <li class="humi_li">
                                <p class="humi_p2">设定湿度:</p>
                                <p class="humi_p3">{{item.unit[5].value.toFixed(0)}}<span>%RH</span></p>
                            </li>
                            <li class="humi_li">
                                <p class="humi_p2">告警信息:</p>
                                <p class="humi_p3">
                                    <span class="humiCard_warning_null" v-if="item.unit[6].value == 0 && item.unit[7].value == 0 && item.unit[8].value == 0">暂无</span>
                                    <span class="humiCard_warning_one" v-if="item.unit[8].value == 1 && item.unit[7].value == 0 && item.unit[6].value == 0">漏水报警</span>
                                    <span class="humiCard_warning_one" v-if="item.unit[6].value == 0 && item.unit[7].value == 1 && item.unit[8].value == 0">压缩机故障</span>
                                    <span class="humiCard_warning_one" v-if="item.unit[7].value == 0 && item.unit[8].value == 0 && item.unit[6].value == 1">压力释放</span>
                                    <marquee  class="humiCard_warning" behavior="alternate" scrollamount="1pixels" style="width:115px" v-if="(item.unit[6].value == 1 && item.unit[7].value == 1) || (item.unit[7].value == 1 && item.unit[8].value == 1) || (item.unit[6].value == 1 && item.unit[8].value == 1)">
                                        <span v-if="item.unit[8].value == 1">漏水报警</span>
                                        <span v-if="item.unit[7].value == 1">压缩机故障</span>
                                        <span v-if="item.unit[6].value == 1">压力释放</span>
                                    </marquee>
                                    <!-- <span v-if="item.unit[2].value == 0">漏水报警</span>
                                    <span v-if="item.unit[2].value == 1">压缩机故障</span>
                                    <span v-if="item.unit[2].value == 2">压力释放</span> -->
                                </p>
                            </li>
                            <li class="humi_li">
                                <p class="humi_p2">风速设定:</p>
                                <p class="humi_p3 humiCard_speed" style="color:#facd86" v-if="item.unit[4].value == 1">高风速</p>
                                <p class="humi_p3 humiCard_speed" style="color:#facd86" v-if="item.unit[4].value == 0">低风速</p>
                            </li>
                        </ul>
                    </div>
                </div>
                
            </el-carousel-item>
            </el-carousel>
        </div>
        
    </div>
</template>

<script>
export default {
    props: ['nowIndex', 'cardData', 'nowId'],
    data () {
        return{
        }
    },
    created() {
    },
    methods: {
        // 跳转
        router(val,item){
            var arr = {
                addr:item.addr,
                name:item.name,
                type:item.type,
                uid:item.uid
            }
            localStorage.setItem("当前设备编号", JSON.stringify(arr))
            localStorage.setItem("menuRouter", val)
        },
    },
     // 清除定时器
    beforeDestroy() {
    },
}
</script>

<style scoped>

/deep/ .el-carousel__container .el-carousel__arrow {
    height: 150px !important;
    width: 110px !important;
    border-radius: 0;
    background: none;
}
/deep/ .el-icon-arrow-left {
    margin-left: -110px !important;
}
/deep/ .el-icon-arrow-right{
    margin-right: -110px !important;
}
/deep/ .el-carousel__indicators{
    display: none;
}
.normal .card_icon{
    font-size: 20px;
}
/deep/ .card_padding {
    padding: 0px 10px 0px 30px !important;
    display: flex;
}
.left{
    margin-left: 20px;
}
.humi_water{
    width: 170px;
}
.humi_w_div{
    border-bottom: 4px solid #8fbbff;
    margin: 0 30px 15px 0;
    text-align: center;
    padding: 5px 0;
    height: 100px;
    background: #6e7c9b42;
}
.humi_w_div_flex{
    display: flex;
}
.humi_w_div_title{
    width: 20px;
    margin-top: 25px;
    margin-right: 10px;
}
.humi_w_icon{
    display: flex;
}
.humi_w_icon p{
    margin-left: 5px;
    font-size: 25px;
    line-height: 60px;
    color: #38bdea;
}
.shuiwei{
    font-size: 40px;
    margin: 10px;
}
.humi_p1{
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 25px;
    color: #facd86;
}
.right{
   padding-left: 20px;
}
.humi_li{
    display: flex;
    font-size: 17px;
    height: 45px;
    line-height: 45px;
}
.humi_p2{
    width: 90px;
    overflow: hidden;
    margin-top: 2px;
}
.humi_p3{
    font-size: 25px;
    color: #38bdea;
}
.humi_p3 span{
    font-size: 15px;
    color: #acacac;
    margin-left: 5px;
}
.shuiqiu {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #607d8b;
    margin: 5px auto;
    margin-left: 20px;
    position: relative;
    overflow: hidden;
}
.shuiqiucontent {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    position: relative;
    overflow: hidden;
    margin: 3px;
    border-radius: 50%;
    background: linear-gradient(#8fddf826 75%, #38bdea00 0);
    background-size: 30px 11px;
}
.humiCard_shuiwei{
    position: relative;
    top: -47px;
}
.shui {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    margin-left: -100px;
}
.shui1 {
    top: 66px;
    background: #ff0000be;
}
.shui2 {
    top: 56px;
    background: #38BDEA8c;
}
.shui3 {
    top: 44px;
    background: #38BDEA8c;
}
.shui4 {
    top: 34px;
    background: #38BDEA8c;
}
.shui5 {
    top: 22px;
    background: #38BDEA8c;
}
.shui6 {
    top: 12px;
    background: #38BDEA8c;
}
.shui7 {
    top: 2px;
    background: #ff0000be;
}
/* 报警样式 */
.humiCard_warning_null{
    padding-left: 0px;
    margin-left: 0px !important;
    font-size: 18px !important;
    color: #32b16c !important;
}
.humiCard_warning span{
    font-size: 18px;
    color: red;
}
.humiCard_warning_one{
    margin-left: 0px !important;
    font-size: 18px !important;
    color: red !important;
    font-weight: lighter;
}
.humiCard_speed{
    font-size: 17px;
    font-weight: lighter;
    line-height: 48px;
}
</style>